<script lang="ts" setup>
const faqs = [
  {
    title: "这个网站能为我提供什么帮助？",
    icon: `
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
        <path d="M2 17l10 5 10-5"/>
        <path d="M2 12l10 5 10-5"/>
      </svg>
    `,
    content:
      "本网站为前后端开发者提供全面的资源，包括最新技术知识点、精选面试题库、真实项目案例分析和专业职业规划建议，帮助你在竞争激烈的技术求职市场中脱颖而出。",
  },
  {
    title: "哪些人适合使用这个平台？",
    icon: `
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <path d="M14.31 8l5.74 9.94M9.69 8H2.5m10.14 4L12 20"/>
      </svg>
    `,
    content:
      "无论你是刚入门的前端新手、正在积极求职的开发者，还是希望提升技术深度的资深工程师，我们的内容都能满足你在不同阶段的学习和职业发展需求。",
  },
  {
    title: "网站的收费模式是怎样的？",
    icon: `
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 1v22M4 6h16M4 12h16M4 18h16"/>
      </svg>
    `,
    content:
      "本来网站所有内容都是免费的，但为了更好的服务用户，会在后续版本中加入收费功能，价格可能会根据用户的使用习惯和收益进行调整。",
  },
  {
    title: "如何参与内容贡献或建立合作？",
    icon: `
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 3h18v18H3V3z"/>
        <path d="M9 9h6v6H9z"/>
      </svg>
    `,
    content:
      "我们欢迎任何对前端技术感兴趣的开发者参与内容贡献或合作。你可以通过网站上的联系方式与我们取得联系，分享你的想法和建议。",
  },
];
</script>

<template>
  <div class="faq-section">
    <h2>FAQ</h2>
    <p class="faq-subtitle">
      这里列出了一些常见问题的解答，如果没有找到你想要的答案，欢迎联系我们
    </p>

    <div class="faq-list">
      <div class="faq-item" v-for="(faq, i) in faqs" :key="i">
        <div class="faq-title">
          <span v-html="faq.icon" class="faq-icon"></span>
          {{ faq.title }}
        </div>
        <p class="faq-content">{{ faq.content }}</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.faq-section {
  margin-top: 60px;

  h2 {
   font-size: 38px;
    font-weight: bold;
    text-align: center;
    margin: 40px 0 20px;
    background: linear-gradient(90deg, #ff6ec4, #7873f5, #4ade80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

  .faq-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
  }

  .faq-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .faq-item {
    flex: 1 1 calc(40% - 10px);
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    transition: border-color 0.3s;
    cursor: pointer;

    .faq-title {
      display: flex;
      align-items: center;
      font-weight: 600;
      margin-bottom: 8px;
      color: red; 

      .faq-icon {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        display: inline-block;
        flex-shrink: 0;
      }
    }

    .faq-content {
      font-size: 14px;
      color: #555;
      line-height: 1.6;
      text-align: left;
    }

    // Hover 效果
    &:hover {
      border-color: #007bff;

      .faq-title {
        color: #007bff; // 鼠标悬停时改变文字颜色
      }
    }
  }
}
</style>